<template>
  <div class="table-wrapper">
    <div class="search-container">
      <div class="search-wrapper">
        <span class="label">楼宇：</span>
        <el-cascader size="mini" class="large-select" v-model="params.room_id" :options="buildingList" placeholder="请选择楼宇"
                     :props="{ checkStrictly: true, emitPath: false, multiple: false }"
                     collapse-tags
                     clearable>
        </el-cascader>
      </div>
      <div class="search-wrapper">
        <span class="label">时间类型：</span>
        <el-select size="mini" v-model="params.time_type" placeholder="请选择时间类型" @change="changeTimeType">
          <el-option v-for="item in timeTypeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
      <div class="search-wrapper">
        <span class="label">开始时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.start_time"
          :type="params.time_type===1?'date':(params.time_type===2?'month':'year')"
          :value-format="params.time_type===1?'yyyy-MM-dd':(params.time_type===2?'yyyy-MM':'yyyy')"
          placeholder="选择开始时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">结束时间：</span>
        <el-date-picker
          size="mini"
          v-model="params.end_time"
          :type="params.time_type===1?'date':(params.time_type===2?'month':'year')"
          :value-format="params.time_type===1?'yyyy-MM-dd':(params.time_type===2?'yyyy-MM':'yyyy')"
          placeholder="选择结束时间"
        >
        </el-date-picker>
      </div>
      <div class="search-wrapper">
        <span class="label">类型：</span>
        <el-select size="mini" v-model="params.type" placeholder="请选择类型">
          <el-option v-for="item in TypeList" :key="item.text" :label="item.text" :value="item.value"></el-option>
        </el-select>
      </div>
    </div>
    <div class="search-container">
      <div class="search-wrapper">
        <el-button @click="getYdChart" icon="el-icon-search" size="mini" >查询</el-button>
      </div>
    </div>
    <common-chart class="common-chart more-search" :chart-type="'bar'" size="big" :data="chart" v-if="!loading"></common-chart>
  </div>
</template>

<script>
import CommonChart from '@/views/pages/components/CommonChart'
import portal from '@/api/portal'
export default {
  name: 'YdChart',
  props: ['type'],
  data () {
    return {
      loading: true,
      params: {
        page: 1,
        type: null,
        start_time: null,
        end_time: null,
        room_id: null
      },
      roomIds: [],
      buildingList: [],
      roomList: [],
      timeTypeList: [
        {
          text: '天',
          value: 1
        },
        {
          text: '月',
          value: 2
        },
        {
          text: '年',
          value: 3
        }
      ],
      TypeList: [
        {
          text: '最多',
          value: 1
        },
        {
          text: '最小',
          value: 2
        }
      ],
      data: [],
      chart: {
        name: '用电排行',
        xAxis: [{ data: [] }],
        series: [],
        legend: []
      },
      roomMap: {}
    }
  },
  components: {
    CommonChart
  },
  created () {
    this.getRoomClass()
  },
  computed: {
  },
  mounted () {
  },
  methods: {
    async getYdChart () {
      if (!this.params.room_id) {
        this.$message.warning('请选择楼宇')
        return
      }
      if (!this.params.time_type) {
        this.$message.warning('请选择时间类型')
        return
      }
      if (!this.params.start_time) {
        this.$message.warning('请选择开始时间')
        return
      }
      if (!this.params.end_time) {
        this.$message.warning('请选择结束时间')
        return
      }
      if (!this.params.type) {
        this.$message.warning('请选择类型')
        return
      }
      const params = {
        room_id: this.params.room_id,
        time_type: this.params.time_type,
        type: this.params.type,
        start_time: this.params.start_time,
        end_time: this.params.end_time
      }
      const res = await portal.getYdChart(params)
      if (res.data) {
        this.loading = true
        setTimeout(() => {
          const records = res.data
          const xAxisData = []
          records.forEach((e) => {
            xAxisData.push(e.room_name)
          })
          const legend = []
          // legend.push('房间')
          const series = []
          series.push(
            {
              type: 'bar',
              name: '房间',
              barWidth: '10%',
              label: {
                show: true,
                position: 'top',
                textStyle: { color: '#fff' }
              },
              data: records.map(e => e.total_pp)
            }
          )
          this.chart.series = series
          this.chart.legend = legend
          this.chart.xAxis = [
            { data: xAxisData }
          ]
          this.loading = false
        })
      }
    },
    // 获取楼宇
    async getRoomClass () {
      const result = await portal.getRoomClass()
      if (result.data) {
        const building = result.data
        building.forEach(e => {
          e.label = e.name
          e.value = e.id
          e.disabled = true
          e.children = e.child
          if (e.children) {
            e.children.forEach(el => {
              el.label = el.name
              el.value = el.id
              el.children = el.child
              delete el.children
              if (el.children) {
                el.children.forEach(ele => {
                  ele.label = el.name
                  ele.value = el.id
                  delete ele.children
                })
              }
            })
          }
        })
        this.buildingList = building
      }
    },
    changeTimeType () {
      this.params.start_time = null
      this.params.end_time = null
    }
  }
}
</script>

<style scoped lang="scss">

</style>
